<template>
  <div>
    <van-overlay :show="show" @click="show = false">
      <div class="bg_fff bkra8 bind_detail" @click.stop>
        <BindItem :item="bindInfo"></BindItem>
        <div class="plr_12">
          <div class="detail_wrap">
            <div class="fl vstart dx_14 lh_24">
              <div class="w70 fls color_8c">绑本类型</div>
              <div class="fl1 color_333">{{ bindInfo.bindType === 0 ? '免费绑本' : '付费绑本' }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">支付状态</div>
              <div class="fl1 color_333">{{ bindInfo.payStatus === 5 ? '支付中' : bindInfo.payStatus === 15 ? '支付完成' : '-' }}</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">绑本任务</div>
              <div class="fl1 color_success" @click="showTaskInfo">点击查看</div>
            </div>
            <div class="fl vstart dx_14 mt8 lh_24">
              <div class="w70 fls color_8c">绑本时间</div>
              <div class="fl1 color_333">{{ timeStampToTime(bindInfo.createTime, 'Y-m-d H:i:s') }}</div>
            </div>
          </div>
          <div class="btn_wrap flvcc" v-if="bindInfo.bindStatus == 10 && !(bindInfo.bindType == 20 && bindInfo.payStatus == 5)">
            <div class="common_btn flvcc bk_dc color_fail mr10" @click="handleRefuse()">拒绝</div>
            <div class="common_btn flvcc bg_d1" @click="handlePass()">通过</div>
          </div>
        </div>
      </div>
    </van-overlay>
    <TaskInfo ref="TaskInfo"></TaskInfo>
  </div>
</template>

<script>
import { Overlay, Dialog, Toast, Field  } from 'vant';
import BindItem from './BindItem.vue'
import TaskInfo from './TaskInfo.vue'
import { 
  agreeBind,
  refuseBind
} from '@/api/bind.js'
import { timeStampToTime } from '@/utils/util'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Dialog.Component.name]: Dialog.Component,
    [Field .name]: Field ,
    [Overlay.name]: Overlay,
    BindItem,
    TaskInfo
  },

  props: {
  },
  data() {
    return {
      timeStampToTime,
      show: false,
      showDeliver: false,
      expressNo: '',
      bindInfo: {}
    };
  },

  methods: {
    initData(item, index) {
      this.bindInfo = item
      this.bindIndex = index
      this.show = true
    },

    // 查看绑本任务
    showTaskInfo() {
      this.$refs.TaskInfo.initData(this.bindInfo.id)
    },

    // 通过绑本
    async handlePass() {
      Dialog.confirm({
        title: '提示',
        message: '确定要通过该绑本吗?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                id: this.bindInfo.id
              }
            }
            const res = await agreeBind(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.bindInfo.bindStatus = 20
              this.$emit('refresh', this.bindInfo, this.bindIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    },

    // 拒绝绑本
    async handleRefuse() {
      Dialog.confirm({
        title: '提示',
        message: '确定要拒绝该绑本吗?',
      })
        .then(async () => {
          try {
            const params = {
              request: {
                id: this.bindInfo.id,
                reason: ''
              }
            }
            const res = await refuseBind(params)
            if (res.errorCode === 0) {
              Toast('操作成功');
              this.show = false
              this.bindInfo.bindStatus = 30
              this.$emit('refresh', this.bindInfo, this.bindIndex)
            }
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          // on cancel
        });
    }

  }
};
</script>

<style lang="less">
.bind_detail {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.plr_12 {
  padding: 0 12px;
}
.lh_24 {
  line-height: 24px;
}
.bk_97 {
  border: 1px solid #979797;
}
.detail_wrap {
  padding: 8px 0;
  border-top: 1px dashed #E7E7E7;
}
.btn_wrap {
  padding: 12px 0;
  border-top: 1px dashed #E7E7E7;
}

</style>
